const htmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
	devtool: 'source-map',
	entry: {
		app: './app/enter.js',
	},
	output: {
		path: `${__dirname}/dist`,
		filename: 'js/[name].bundle.js'
	},
	module: {
		rules: [{
			test: /\.(js|ts)$/,
			exclude: /(node_modules|bower_components)/,
			include: path.resolve(__dirname, 'app'),
			use: {
				loader: 'babel-loader',
			}
		}, {
			test: /\.css$/,
			use: [{
				loader: MiniCssExtractPlugin.loader,
			}, {
				loader: 'css-loader',
				options: {
					alias: {
						bootstrap: "bootstrap/dist/css/bootstrap.css"
					}
				}
			}]

		}, {
			test: /\.html$/,
			use: {
				loader: 'html-loader',
				options: {
					attrs: ['img:src', 'pre:data-src'],
					outputPath: 'assets/'
				}
			}
		}, {
			test: /\.scss$/,
			use: [
				"style-loader", // creates style nodes from JS strings
				"css-loader", // translates CSS into CommonJS
				"sass-loader" // compiles Sass to CSS, using Node Sass by default
			]
		}, {
			test: /\.(gif|jpg|png|woff|svg|eot|ttf|woff2)$/,
			use: [
				{
					loader: 'url-loader',
					options: {
						limit: 1024,
						name: '[name].[ext]',
						outputPath: 'assets/'
					}
				}
			]
		}],
	},
	devServer: {
		contentBase: path.join(__dirname, "dist"),
		compress: true,
		host: '192.168.200.40',
		port: 8088,
		open: true,
		disableHostCheck: true
	},
	plugins: [
		new CleanWebpackPlugin(['dist']),
		new htmlPlugin({
			filename: 'index.html',
			template: 'index.html',
			inject: 'body',
			title: 'test'
		}),
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery'
		}),
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css"
		})
	],
	mode: 'development',
	resolve: {
		alias: {
			style: path.resolve(__dirname, 'app/style'),
			script: path.resolve(__dirname, 'app/script'),
			component: path.resolve(__dirname, 'app/component')
		}
	}
}